<template>
  <div id="app">
   <header>
    <h1>2024待办事项</h1>
    <form id="new-task-form" @submit.prevent="handleAdd">
     <input
      type="text"
      v-model="task"
      id="new-task-input"
      placeholder="把计划写下来吧?"
     />
     <input
      type="submit"
      id="new-task-submit"
      value="Add Task"
     />
    </form>
   </header>
   <main>
    <section class="task-list">
     <h2>任务列表</h2>
     <div id="tasks">
      <template v-for="(item, index) in tasks" :key="index">
       <div class="task">
        <div class="content">
         <input
          type="text"
          class="text"
          v-model="tasks[index]"
          :disabled="readonly[index]"
         />
        </div>
        <div class="actions">
         <button class="edit" @click="handleEdit(item, index)">
          {{ btnName[index] }}
         </button>
         <button class="delete" @click="handleDelete(index)">
          Delete
         </button>
        </div>
       </div>
      </template>
     </div>
    </section>
   </main>
  </div>
</template>
<script>
 export default {
  data() {
   return {
    tasks: [],
    task: "",
    btnName: [],
    readonly: [],
   };
  },
  methods: {
   handleAdd() {
    if (this.task) {
     this.tasks.push(this.task);
     this.task = "";
     this.btnName.push("编辑");
     this.readonly.push(true);
    }
   },
   handleDelete(index) {
    this.tasks.splice(index, 1);
   },
   handleEdit(item, index) {
    if (this.btnName[index] === "编辑") {
     this.btnName[index] = "保存";
     this.readonly[index] = false;
    } else {
     this.tasks[index] = item;
     this.btnName[index] = "编辑";
     this.readonly[index] = true;
    }
   },
  },
 };
 </script>
 
 <style>
 /* 引入外部样式表 */
 @import url('./src/assets/tasklist.css');
 </style>